<template>
  <div class="doctorWithdrawalsList padding_20">
    <el-input v-model="param.searchCondition"
              placeholder="请输入用户名"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-input v-model="param.hospitalName"
              placeholder="请输入执业单位"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-date-picker v-model="time"
                    type="datetimerange"
                    value-format="yyyy-MM-dd"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
    </el-date-picker>
    <el-select v-model="param.doctorTitleName"
               placeholder="请选择角色"
               class="w-200"
               clearable
               @clear="handleQuery"
               @change="handleQuery">
      <el-option v-for="it in doctorTitleName"
                 :key="it.id"
                 :label="it.name"
                 :value="it.name"></el-option>
    </el-select>
    <el-select v-model="param.status"
               placeholder="请选择审核状态"
               class="w-200"
               clearable
               @clear="handleQuery"
               @change="handleQuery">
      <el-option label="待审核"
                 :value="0"></el-option>
      <el-option label="通过"
                 :value="1"></el-option>
    </el-select>
    <el-select v-model="param.withdrawStatus"
               placeholder="提现状态"
               class="w-200"
               clearable
               @clear="handleQuery"
               @change="handleQuery">
      <el-option label="成功"
                 :value="0"></el-option>
      <el-option label="失败"
                 :value="-1"></el-option>
      <el-option label="高灯账户余额不足"
                 :value="300"></el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <!-- <el-button icon="ios-download" class="btn_1" @click="handleQuery">导出</el-button> -->
    <Table :columns="tableCol"
           :data="tableData"
           stripe
           border
           class="mt-20">
      <template slot-scope="{row}"
                slot="action">
        <!-- <span @click="handleReject(row)" v-if="row.status==0">驳回</span> -->
        <span @click="handlePass(row)"
              v-if="row.status==0">通过</span>
        <span @click="seedetail(row)">详情</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <Modal v-model="modalShow"
           title="提现详情"
           :footer-hide="true"
           width="80%">
      <div class="model_top">
        <div class="top_left">
          <span>头像：</span>
          <img v-if="chooseDate.doctorDto"
               :src="chooseDate.doctorDto.headImageUrl"
               alt />
        </div>
        <div class="top_right">
          <ul class="right_ul">
            <li>
              <span>登录账号：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.loginName}}</span>
            </li>
            <li>
              <span>姓名：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.nickName}}</span>
            </li>
            <li>
              <span>性别：</span>
              <span>男</span>
            </li>
            <li>
              <span>所在地：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.areaName}}</span>
            </li>
            <li>
              <span>办公电话：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.departPhone}}</span>
            </li>
            <li>
              <span>用户邀请码：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.inviteCode}}</span>
            </li>
            <li>
              <span>执业单位：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.hospitalName}}</span>
            </li>
            <!-- <li>
              <span>科室：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.departmentName}}</span>
            </li> -->
            <li>
              <span>角色：</span>
              <span v-if="chooseDate.doctorDto">{{chooseDate.doctorDto.positionName}}</span>
            </li>
          </ul>
        </div>
      </div>
      <ul class="four_ul">
        <li>
          <span>申请时间：</span>
          <span>{{timeFormate(chooseDate.createTime)}}</span>
        </li>
        <li>
          <span>提现金额：</span>
          <span>{{chooseDate.amount}}</span>
        </li>
        <li>
          <span>提现账户类型：</span>
          <span>{{chooseDate.receivablesAccount}}</span>
        </li>
        <li>
          <span>账号：</span>
          <span>{{chooseDate.transferId}}</span>
        </li>
        <li>
          <span>用户实际到账金额：</span>
          <span>{{(chooseDate.amount*(1-0.095)).toFixed(2)}}</span>
        </li>
        <li>
          <span>公司实际支付金额：</span>
          <span>{{(chooseDate.amount*(1-0.095+0.071)).toFixed(2)}}</span>
        </li>
        <li>
          <span>公司盈利：</span>
          <span>{{(chooseDate.amount*0.024).toFixed(2)}}</span>
        </li>
        <li></li>
        <li v-if="chooseDate.status != 0">
          <span>审核状态：</span>
          <span>{{chooseDate.status == -1?'驳回':chooseDate.status == 0 ?'待审核':'通过' }}</span>
        </li>
        <li v-if="chooseDate.status != 0">
          <span>审核时间：</span>
          <span>{{timeFormate(chooseDate.lastUpdateTime)}}</span>
        </li>
        <li v-if="chooseDate.status != 0">
          <span>审核账号：</span>
          <span v-if="chooseDate.adminDto">{{chooseDate.adminDto.userName}}</span>
        </li>
        <li></li>
        <li v-if="chooseDate.status != 0">
          <span>提现状态：</span>
          <span>{{chooseDate.withdrawStatus == null ? '' : chooseDate.withdrawStatus == -1 ? "提现失败" : chooseDate.withdrawStatus === '200' ? "高灯运营审核不通过" :chooseDate.withdrawStatus == 300 ? "高灯账户余额不足，请充值！":chooseDate.withdrawStatus == 700 ? "高灯正在结算中":"提现成功"}}</span>
        </li>
        <li v-if="chooseDate.status != 0">
          <span>到账时间：</span>
          <span>{{chooseDate.accountingDate == null ? '' : timeFormate(chooseDate.accountingDate)}}</span>
        </li>
        <li v-if="chooseDate.withdrawStatus == -1 || chooseDate.withdrawStatus === '200'">
          <span>失败原因：</span>
          <span>{{chooseDate.remark}}</span>
        </li><br>
      </ul>
      <p align="center">
        <el-button type="primary"
                   @click="modalShow = false">返 回</el-button>
      </p>
    </Modal>
  </div>
</template>

<script>
  import Page from "@/base/page/page";
  import { mapGetters } from "vuex";
  import { doctor } from "@/api/codeName";
  export default {
    name: "doctorWithdrawalsList",
    data () {
      return {
        modalShow: false,
        chooseDate: {},
        tableCol: [
          {
            type: "index2",
            title: "",
            width: 60,
            render: (h, params) => {
              return h(
                "span",
                params.index + this.page.pageIndex * this.page.pageSize + 1
              );
            },
          },
          {
            title: "用户姓名",
            key: "nickName",
            align: 'center',
            render: (h, params) => {
              return h("span", params.row.doctorDto.nickName);
            },
          },
          {
            title: "手机号",
            key: "loginName",
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h("span", params.row.doctorDto.loginName);
            },
          },
          {
            title: "执业单位",
            key: "hospitalName",
            render: (h, params) => {
              return h("span", params.row.doctorDto.hospitalName);
            },
          },
          {
            title: "用户角色",
            key: "hospitalName",
            align: 'center',
            render: (h, params) => {
              return h("span", params.row.doctorDto.doctorTitleDto.name);
            },
          },
          // {
          //   title: "科室",
          //   key: "departmentName",
          //   render: (h, params) => {
          //     return h("span", params.row.doctorDto.departmentName);
          //   },
          // },
          {
            title: "提现金额（元）",
            key: "amount",
            align: 'center',
            width: 130
          },
          {
            title: "提现账户类型",
            key: "type",
            width: 150,
            align: 'center',
            render: (h, params) => {
              let tmp = "";
              doctor.doctorWithdrawals.type.forEach((obj) => {
                if (params.row.type == obj.code) {
                  tmp = obj.name;
                }
              });
              return h("span", tmp);
            },
          },
          {
            title: '提现到账金额(元)',
            key: 'positionName',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('span', (params.row.amount * (1 - 0.095)).toFixed(2));
            }
          },
          {
            title: '平台支付金额(元)',
            key: 'positionName',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('span', (params.row.amount * (1 - 0.024)).toFixed(2));
            }
          },
          {
            title: '公司盈利(元)',
            key: 'positionName',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('span', (params.row.amount * 0.024).toFixed(2));
            }
          },
          {
            title: "审核状态",
            key: "status",
            align: 'center',
            render: (h, params) => {
              let tmp = "";
              doctor.doctorWithdrawals.status.forEach((obj) => {
                if (params.row.status == obj.code) {
                  tmp = obj.name;
                }
              });
              return h("span", tmp);
            },
          },
          {
            title: "提现状态",
            align: 'center',
            key: "withdrawStatus",
            render: (h, params) => {
              let tmp = "";
              if (params.row.withdrawStatus == null) {
                tmp = '--';
              } else if (params.row.withdrawStatus == -1) {
                tmp = "提现失败";
              } else if (params.row.withdrawStatus == 0) {
                tmp = "提现成功";
              } else if (params.row.withdrawStatus === '200') {
                tmp = "高灯运营审核不通过";
              } else if (params.row.withdrawStatus == 300) {
                tmp = "高灯账户余额不足，请充值！";
              }
              return h("span", tmp);
            },
          },
          // {
          //   title: "申请时间",
          //   key: "createTime",
          //   width: 150,
          //   render: (h, params) => {
          //     return h(
          //       "span",
          //       this.commonFunction.timestampFormat(
          //         new Date(params.row.createTime),
          //         "yyyy-MM-dd hh:mm"
          //       )
          //     );
          //   },
          // },

          {
            title: "提现到账时间",
            key: "createTime",
            width: 150,
            align: 'center',
            render: (h, params) => {
              if (params.row.accountingDate) {
                let date = params.row.accountingDate;
                return h(
                  "span",
                  date ? this.commonFunction.timestampFormat(
                    new Date(date),
                    "yyyy-MM-dd hh:mm"
                  ) : ''
                );
              } else {
                return h('span', '--')
              }
            },
          },
          {
            title: "操作",
            slot: "action",
            align: "center",
          },
        ],
        tableData: [],
        pageTotal: 0, //总条数
        wdStudioTypeList: [],
        hospitalList: [],
        loading: false,
        param: {
          searchCondition: '',
          hospitalName: '', // 执业单位
          startTime: '',
          endTime: '',
          status: '', // 审核状态（0 待审核 1通过）
          withdrawStatus: '', // 提现状态
          withdrawType: 0, // 提现类型 0. 高灯 1. 非代缴税提现，平台转账 必传参数
        },
        doctorTitleName: [],
        time: [],
        currTime: [],
      };
    },
    watch: {
      currTime: {
        deep: true, // 深度监听
        handler (val) {
          this._getList()
        }
      }
    },
    mounted () {
      if (this.params.doctorWithdrawalsList) {
        this.param = this.params.doctorWithdrawalsList;
      } else {
        this.$store.commit("SET_PARAMS", { doctorWithdrawalsList: this.param });
      }
      this.post(this.api.doctorTitle.getPageAPP).then(res => {
        if (res.data.code === '200') {
          this.doctorTitleName = res.data.object
        }
      })
      this._getList();
    },
    methods: {
      changeTime (item) {
        this.currTime = item
        if (item) {
          this.param.startTime = item[0]
          this.param.endTime = item[1]
        } else {
          this.param.startTime = ''
          this.param.endTime = ''
        }
      },
      timeFormate (data) {
        if (!data) return ''
        let newdata =
          new Date(data).toLocaleDateString().replace("-") +
          " " +
          new Date(data).toTimeString().substr(0, 8);
        return newdata;
      },
      seedetail (row) {
        this.modalShow = true;
        this.chooseDate = row
      },
      handleReject (row) {
        this.$prompt("请输入驳回理由", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            let param = {
              id: row.id,
              remark: value,
            };
            this.post(this.api.doctorWithdrawalsReject.url, param).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  showClose: true,
                  message: "驳回成功!",
                  type: "success",
                });
                this._getList();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.message,
                  type: "error",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      },
      handlePass (row) {
        this.$Modal.confirm({
          title: "确认",
          content: "<p>您确认通过该提现申请？</p>",
          onOk: () => {
            this.ajax({
              type: this.api.doctorWithdrawalsPass.type,
              url: this.api.doctorWithdrawalsAudit.url,
              isDel: true,
              data: {
                id: row.id,
              },
              success: (data) => {
                this.$Message.success("审核成功！");
                setTimeout(() => {
                  this._getList();
                }, 2000)

              },
              error: (data) => {
                this.$Message.error(data.message);
              },
            });
          },
          onCancel: () => { },
        });
      },
      handleQuery () {
        if (this.param.value) {
          this.param.startTime = this.param.value[0]
          this.param.endTime = this.param.value[1]
        } else {
          this.param.startTime = null
          this.param.endTime = null
        }
        this.page.pageIndex=0
        this._getList();
      },

      _getList () {
        this.ajax({
          type: this.api.doctorWithdrawalsList.type,
          url: this.api.doctorWithdrawalsList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object;
            this.pageTotal = data.totalNum;
            this.$previewRefresh();
          },
          error: (data) => {
            this.$Message.error(data.message);
          },
        });
      },
    },
    computed: {
      ...mapGetters(["page", "params"]),
    },
    components: {
      Page,
    },
  };
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .doctorWithdrawalsList {
    height: 100%;
  }
  .model_top {
    display: flex;
    .top_left {
      width: 300px;
      height: 170px;
      display: flex;
      img {
        height: 150px;
        width: 150px;
      }
    }
    .top_right {
      width: 79%;
      height: 170px;
      .right_ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 30%;
          height: 40px;
          line-height: 40px;
          list-style: none;
          span:nth-child(1) {
            //   color: red;
            display: inline-block;
            width: 160px;
            text-align: right;
          }
        }
      }
    }
  }
  .four_ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 25%;
      height: 40px;
      line-height: 40px;
      list-style: none;
      span:nth-child(1) {
        //   color: red;
        display: inline-block;
        width: 160px;
        text-align: right;
      }
    }
  }
</style>
